<template>
    <div class="box">
       <div class="overlay" v-show="showOverlay">
         <p class="overlay-text">正在生成回答，请稍候...</p>
       </div>
      <div ref="vantaRef" style="width: 100%; height: 100vh"></div>
      <div class="banner">
        <p>请开始说话...</p>
      <el-button @click="startRecording">开始录音</el-button>
      <el-button @click="stopRecording">停止录音</el-button>
        <el-dropdown @command="handleCommand">
          <el-button type="primary">
            选择你喜欢的客服对话：{{ selectedVoiceType }}<i class="el-icon-arrow-down el-icon--right"></i>
          </el-button>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="0">小白</el-dropdown-item>
            <el-dropdown-item command="1">爱打瞌睡王阵雨</el-dropdown-item>
            <el-dropdown-item command="2">野原磊之助</el-dropdown-item>
            <el-dropdown-item command="3">赵哥</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <!-- <el-button @click="PostAi">确定</el-button> -->
        <!-- <p>点击播放Ai语音回答</p> -->
        <audio ref="audioPlayer" controls :src="voicePath" @play="showSubtitle"></audio>
      </div>
      <el-dialog :visible.sync="subtitleVisible" :show-close="false" :modal="false" :width="'50%'" :before-close="() => false">
      <div class="subtitle">
        {{ subtitleText }}
      </div>
    </el-dialog>
    </div>
  </template>
  <script>
  import * as THREE from "three";
  import HALO from "vanta/src/vanta.halo";
  
  export default {
    data() {
      return {
        showOverlay: false,  // 添加 showOverlay 数据属性
         voiceType: '0',  // 默认选择活泼男声
         question: '',  // 用户输入的问题
         voicePath: '',  // 语音路径
         selectedVoiceType: '小白',
         recognition: null, // 添加 recognition 数据属性
         subtitleVisible: false, // 控制弹框的显示
         subtitleText: '', // 存储字幕文本
      };
    },
    mounted() {
      this.vantaEffect = HALO({
        el: this.$refs.vantaRef,
        THREE: THREE,
      });
      this.initSpeechRecognition();
      VANTA.HALO({
        el: this.$refs.vantaRef,
        /*以下为样式配置*/
        mouseControls: true,
        touchControls: true,
        gyroControls: false,
        minHeight: 200.0,
        minWidth: 200.0,
        baseColor: 0xd9, //基准颜色
        backgroundColor: 0x0, //背景颜色 需十进制
        amplitudeFactor: 1.1, //振幅因子
        xOffset: -0.31, //移动到X轴
        yOffset: -0.17, //移动到Y轴
        size: 3.0, //大小
      });
    },
    methods: {
       handleCommand(command) {
        this.voiceType = command;
        switch (command) {
          case '0':
            this.selectedVoiceType = '小白';
            break;
          case '1':
            this.selectedVoiceType = '爱打瞌睡王阵雨';
            break;
          case '2':
            this.selectedVoiceType = '野原磊之助';
            break;
          case '3':
            this.selectedVoiceType = '赵哥';
            break;
        }
      },
  
      initSpeechRecognition() {
        if ('webkitSpeechRecognition' in window) {
          this.recognition = new webkitSpeechRecognition();
          this.recognition.lang = 'zh-CN'; // 设置语言为中文
          this.recognition.onresult = (event) => {
            const transcript = event.results[0][0].transcript;
            this.question = transcript; // 更新 question 数据属性
            console.log('识别结果:', transcript); // 在控制台打印识别结果
            this.PostAi();
          };
          this.recognition.onerror = (event) => {
            console.error('Speech recognition error detected: ' + event.error);
          };
        } else {
          console.error('webkitSpeechRecognition not supported');
        }
      },
  
      startRecording() {
        this.recognition.start();
      },
      stopRecording() {
        this.recognition.stop();
      },
  
  PostAi() {
    this.showOverlay = true;  // 显示遮罩层
    this.$axios.post('http://localhost:8888/PostAi/Ai', {
      url: 'https://luckycola.com.cn/voice/vaiV1',
      ques: this.question,
      voiceType: this.voiceType,
    })
    .then(response => {
      console.log(response.data);
      console.log(response.data.data);
      this.voicePath = response.data.data.voicepath;  // 更新 voicePath
      this.showOverlay = false;  // 关闭遮罩层
  
      // 显示一个消息框
      this.$message({
            message: 'Ai语音回答成功',
            type: 'success'
          });
  
          // 自动播放声音
          this.$nextTick(() => {
            this.$refs.audioPlayer.play().catch(error => {
              console.error('自动播放失败:', error);
            });
          });
        })
        .catch(error => {
          console.error(error);
          this.showOverlay = false;  // 如果请求失败，也需要关闭遮罩层
        });
      },
      showSubtitle() {
        this.subtitleVisible = true; // 显示弹框
        this.subtitleText = '客服正在播放语音'; // 设置字幕文本
        this.$refs.audioPlayer.addEventListener('ended', this.hideSubtitle);
      },
      hideSubtitle() {
        this.subtitleVisible = false; // 隐藏弹框
        this.subtitleText = ''; // 清空字幕文本
        this.$refs.audioPlayer.removeEventListener('ended', this.hideSubtitle);
      },
  },
  
    beforeDestroy() {
      
    },
  };
  </script>
  
  <style lang="less" scoped>
  
  .box {
    position: relative;
    .banner {
      width: 400px;
      height: 300px;
      z-index: 999;
      position: absolute;
      top: 26%;
      right: 10%;
      // color: #fff;
      background-color: #fff;
      border-radius: 2%;
    }
  }
  p {
    margin-top: 20px;
  }
  .el-button {
    width: 90%;
    display: flex;
    justify-content: center;
    margin: 0 auto;
  }
  
  .el-dropdown-link {
      cursor: pointer;
      color: #409EFF;
    }
    .el-icon-arrow-down {
      font-size: 12px;
    }
  
  .overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  .overlay::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 50px;
    height: 50px;
    margin-top: -25px;
    margin-left: -25px;
    border: 4px solid #fff;
    border-top-color: transparent;
    border-radius: 50%;
    animation: spin 1s linear infinite;
  }
  .overlay-text {
    color: #fff;
    font-size: 20px;
    text-align: center;
  }
  
  @keyframes spin {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }
  </style>
  
  
  